let scroll2 = document.querySelector(".scroll");
//console.log(scroll2);
//获取轮播图的区域
let scrUL = document.querySelector(".scr");
//console.log(scrUL);
let scrULList = scrUL.children; //全部的li
//console.log(scrULList);
let i = 0; //li的索引 轮播区块的

// 箭头
let scroll_arrows = document.querySelector('.scroll_arrows');
//console.log(scroll_arrows);
// 箭头
let lArr = document.querySelectorAll(".scroll_arrows_back");

 let arr = [...lArr]
 //console.log(arr);
// 左箭头
 let arr1 = arr[0];
 //console.log(arr1);
// 右箭头
 let arr2 = arr[1];
 //console.log(arr2);

let circles = document.querySelector(".scroll_dot").children //小圆点
//console.log(circles);

function move(){
i++;
//123
if(i == scrULList.length){
    i = 0;

}
// 321
if(i == -1){
    i = scrULList.length-1;
}

  //先清后加
for(let j = 0; j<scrULList.length; j++){
    scrULList[j].style.opacity = 0;
    circles[j].className = ""; //把之前默认的小红点清除掉
   
} 
// console.log("Aa")

scrULList[i].style.opacity = 1;
circles[i].className = "hover"; // 当前小圆点点亮时候

}
let timer = setInterval(function(){
move();
},2000)

//左右箭头
//   左箭头点击事件
arr1.onclick = () => {
i = i- 2; //为啥要减去2 因为要抵消掉move里的i++之后还得再减去1
move()
   
};
//    右箭头 点击事件
arr2.onclick = () => {
move()  
}; 
//  鼠标移入后停止
scrUL.onmouseover = function(){
clearInterval(timer)
}

//  小圆点点击
for(let j = 0; j<circles.length; j++){
circles[j].onclick = () => {
    i = j - 1;  //为啥要减1 要抵消i++所以减1
    move();


}
}
//鼠标移入轮播区域，清定时器 移除时候开定时器
scrUL.onmouseenter = () => {
clearInterval(timer);

};
scrUL.onmouseout = () => {
timer = setInterval(move,2000)
}


